<%--
  Created by IntelliJ IDEA.
  User: 17271
  Date: 2022/5/6
  Time: 8:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍管理</title>
    <script src="../js/jquery-3.3.1.min.js"></script>

</head>
<style type="text/css">
    #top {
        margin: 0 auto;
        width: 80%;
        margin-top: 8%;
    }

    table {
        width: 100%;
        margin: 0px auto;
    }

    .but {
        background: dodgerblue;
        height: 30px;
        border-radius: 5px;
        border: none;
    }

    /*添加用户*/
    #add {
        background: white;
        width: 30%;
        height: 400px;
        border-radius: 8px;
        /*float: left;*/
        position: fixed;
        margin-top: 100px;
        margin-left: 30%;
        display: none;
    }

    /*添加用户*/
    #edit {
        background: white;
        width: 30%;
        height: 400px;
        border-radius: 8px;
        /*float: left;*/
        position: fixed;
        margin-top: 100px;
        margin-left: 30%;
        display: none;
    }

    td {
        /*border: 1px solid black;*/
    }

    input[type='button']:hover {
        cursor: pointer;
    }

    button:hover {
        cursor: pointer;
    }
</style>
<script>

</script>
<body>
<!--添加用户弹框-->
<div id="add">
    <table style="width: 90%;height: 90%;margin: auto">
        <form method="post" autocomplete="off">
            <tr>
                <td colspan="2" style="text-align: center;font-size: 28px;">添加书籍</td>
            </tr>
            <tr>
                <td>书名:</td>
                <td><input id="bookName_add" type="text" name="username" placeholder="请输入书名"/></td>
            </tr>
            <tr>
                <td>作者:</td>
                <td><input id="author_add" type="text" name="password" placeholder="请输入作者"/></td>
            </tr>
            <tr>
                <td>出版社:</td>
                <td><input id="publisher_add" type="text" name="publisher" placeholder="请输入出版社"/></td>
            </tr>
            <tr>
                <td>出版日期:</td>
                <td><input id="date_add" type="date" name="date" placeholder="请输入出版日期"/></td>
            </tr>
            <tr>
                <td>价格:</td>
                <td><input id="price_add" type="text" name="price" placeholder="请输入价格"/></td>
            </tr>
            <td>用途:</td>
            <td>
                <select id="usage_add" name="usage">
                    <option class="usage_add" value="教育类">教育类</option>
                    <option class="usage_add" value="小说类">小说类</option>
                    <option class="usage_add" value="经济类">经济类</option>
                    <option class="usage_add" value="文化类">文化类</option>
                    <option class="usage_add" value="历史类">历史类</option>
                    <option class="usage_add" value="其他">其他</option>
                </select>
            </td>
            </tr>
            <tr>
                <td>书号(ISBN):</td>
                <td><input id="ISBN_add" type="text" name="name" placeholder="请输入书号"/></td>
            </tr>

            <tr style="text-align: center">
                <td><input id="confirmAdd" type="button" value="确认"
                           style="background: dodgerblue;width: 80px;height: 30px;border: none;border-radius: 6px">
                </td>
                <td><input id="cancelAdd" type="button" value="取消"
                           style="background: dodgerblue;width: 80px;height: 30px;border: none;border-radius: 6px">
                </td>
            </tr>
        </form>
    </table>
</div>

<!--修改图书信息弹框-->
<div id="edit">
    <table style="width: 90%;height: 90%;margin: auto">
        <%--        action="http://localhost:8080/booksystem/member?method=update"--%>
        <form method="post" autocomplete="off">
            <tr>
                <td colspan="2" style="text-align: center;font-size: 28px;">修改图书信息</td>
            </tr>
            <tr>
                <td>图书:</td>
                <td><input id="bookName_edit" type="text" name="bookName" placeholder="请输入图书名"
                           value=""/></td>
            </tr>
            <tr>
                <td>
                    作者:
                </td>
                <td>
                    <input id="author_edit" type="text" name="password" placeholder="请输入作者名" value=""/>
                </td>
            </tr>
            <tr>
                <td>出版社:</td>
                <td><input id="publisher_edit" type="text" name="name" placeholder="请输入出版社名称" value=""/></td>
            </tr>
            <tr>
                <td>出版日期:</td>
                <td>
                    <input id="date_edit" type="date" name="date" placeholder="请输入日期">
                </td>
            </tr>
            <tr>
                <td>价格:</td>
                <td><input id="price_edit" type="number" name="age" placeholder="请输入书籍价格"/></td>
            </tr>
            <tr>
                <td>书籍类型:</td>
                <td>
                    <select id="usage_edit" name="usage">
                        <option class="usage_edit" value="教育类">教育类</option>
                        <option class="usage_edit" value="小说类">小说类</option>
                        <option class="usage_edit" value="经济类">经济类</option>
                        <option class="usage_edit" value="文化类">文化类</option>
                        <option class="usage_edit" value="历史类">历史类</option>
                        <option class="usage_edit" value="其他">其他</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>书号ISBN:</td>
                <td><input id="ISBN_edit" type="text" name="ISBN" placeholder="请输入书号ISBN"/></td>
            </tr>
            <tr style="text-align: center">
                <td>
                    <button style="background: dodgerblue;width: 80px;height: 30px;border: none;border-radius: 6px" type="button" value="确认" id="confirmUpdate">确认</button>

                </td>
                <td><input type="button" value="取消" id="cancelUpdate"
                           style="background: dodgerblue;width: 80px;height: 30px;border: none;border-radius: 6px">
                </td>
            </tr>
        </form>
    </table>
</div>

<div id="top">
    <div>
        <input class="but" id="addBook" type="button" value="添加图书" style="background: dodgerblue;height:30px;">
        <input type="text" id="searchContent" placeholder="请输入图书名、作者、书号、出版社来搜索">
        <input class="but" id="search" type="button" value="搜索">
    </div>
    <div>
        <table style="text-align: center">
            <tr>
                <td>图书ID</td>
                <td>图书名</td>
                <td>作者</td>
                <td>出版社</td>
                <td>出版日期</td>
                <td>价格</td>
                <td>用途</td>
                <td>书号ISBN</td>
                <td>删除操作</td>
                <td>修改操作</td>
            </tr>
            <c:forEach items="${books}" var="book">
                <tr>
                    <td>${book.id}</td>
                    <td>${book.bookName}</td>
                    <td>${book.author}</td>
                    <td>${book.publisher}</td>
                    <td>${book.date}</td>
                    <td>${book.price}</td>
                    <td>${book.usage}</td>
                    <td>${book.ISBN}</td>
                    <td>
                        <button value="${book.id}" class="delete"
                                style="background: dodgerblue;border-radius: 6px;font-size: 18px;border: none">删除
                        </button>
                    </td>
                    <td>
                        <button value="${book.id}" class="update"
                                style="background: dodgerblue;border-radius: 6px;font-size: 18px;border: none">修改
                        </button>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>
</div>

<script>
    var deleteButton = document.getElementsByClassName("delete");
    for (let button of deleteButton) {
        //当点击删除按钮时
        button.onclick = function () {
            if ("${user}" == "管理员") {
                var id = button.getAttribute("value");
                $.ajax({
                    url: "http://localhost:8080/booksystem/book",
                    async: true,
                    data: "method=deleteBook&id=" + id,
                    type: "GET",
                    dataType: "text",
                    success: function (data) {
                        //在成功后重新查询用户信息,并刷新
                        $.ajax(
                            {
                                url: "http://localhost:8080/booksystem/book",
                                async: true,
                                data: "method=findAllBook",
                                type: "GET",
                                dataType: "text",
                                success: function (data) {
                                    window.location.href = "book.jsp";
                                },
                                error: function () {
                                }
                            }
                        );

                    },
                    error: function () {
                        alert("删除失败!")
                    }
                })
            }else{
                alert("您没有权限!");
            }
        }
    }
    //获取修改按钮
    var updateElement = document.getElementsByClassName("update");
    for (let updateButton of updateElement) {
        updateButton.onclick = function () {
            if ("${user}" == "管理员") {
                var bookId = updateButton.getAttribute("value");
                //发送ajax请求,获取该用户的信息
                $.ajax(
                    {
                        url: "http://localhost:8080/booksystem/book",
                        async: true,
                        data: "method=findBook&id=" + bookId,
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            //获取各个input对象,并赋值
                            $("#bookName_edit").attr("value", data.bookName);
                            $("#author_edit").attr("value", data.author);
                            $("#publisher_edit").attr("value", data.publisher);
                            $("#price_edit").attr("value", data.price);
                            $("#confirmUpdate").attr("value", data.id)
                            var date = new Date(data.date);
                            var day = ("0" + date.getDate()).slice(-2);
                            var month = ("0" + (date.getMonth() + 1)).slice(-2);
                            var date1 = date.getFullYear() + "-" + (month) + "-" + (day);
                            $("#date_edit").val(date1);
                            $("#ISBN_edit").attr("value", data.isbn);
                            var usage_edit = document.getElementsByClassName("usage_edit");
                            for (ele of usage_edit) {
                                if (data.usage == ele.innerText) {
                                    ele.setAttribute("selected", true);
                                }
                            }
                            var edit = document.getElementById("edit");
                            edit.style.display = "block";
                        },
                        error: function () {
                            alert("发生了错误");
                        }

                    }
                );
            }else{
                alert("您没有权限!");
            }
        }
    }
    //设置弹框取消按钮的功能
    var cancelUpdate = document.getElementById("cancelUpdate");
    cancelUpdate.onclick = function () {
        var edit = document.getElementById("edit");
        edit.style.display = "none";
    }

    //设置确认按钮的功能,提交修改
    var confirmUpdate = document.getElementById("confirmUpdate");
    confirmUpdate.onclick = function () {
        var bookName = $("#bookName_edit").val();
        var author = $("#author_edit").val();
        var publisher = $("#publisher_edit").val();
        var date = $("#date_edit").val();
        var price = $("#price_edit").val();
        var ISBN = $("#ISBN_edit").val();
        var id = $("#confirmUpdate").val();
        var usage = $("#usage_edit option:selected").val();
        let priceReg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
        if (priceReg.test(price)){
        $.ajax({
            url: "http://localhost:8080/booksystem/book?method=update",
            async: true,
            data:"id="+ id+"&bookName=" + bookName + "&author=" + author + "&publisher=" + publisher + "&date=" + date + "&price=" + price + "&ISBN=" + ISBN+"&usage="+usage,
            type: "post",
            dataType: "text",
            success: function (data) {
                var edit = document.getElementById("edit");
                edit.style.display = "none";
                $.ajax(
                    {
                        url: "http://localhost:8080/booksystem/book",
                        async: true,
                        data: "method=findAllBook",
                        type: "GET",
                        dataType: "text",
                        success: function (data) {
                            window.location.reload(true);
                        },
                        error: function () {
                        }
                    }
                )
            },
            error: function (data) {
            }
        });
        }else{
            alert("价格格式不对");
        }
    }

    //设置添加书籍的功能
    var add = document.getElementById("add");
    var addUser = document.getElementById("addBook");
    addUser.onclick = function () {
        if ("${user}" == "管理员") {
            add.style.display = "block";
        }else {
            alert("您没有权限!");
        }
    }
    //设置添加栏的取消按钮功能
    var cancelAdd = document.getElementById("cancelAdd");
    cancelAdd.onclick = function () {
        //将弹框里的信息清除
        $("#booName_add").val("");
        $("#author_add").val("");
        $("#publisher_add").val("");
        $("#date_add").val("");
        $("#price_add").val("");
        $("#usage_add").val("教育类");
        $("#ISBN_add").val("");
        add.style.display = "none";
    }
    //设置确认添加功能
    var confirmAdd = document.getElementById("confirmAdd");
    confirmAdd.onclick = function () {
        if ("${user}" == "管理员"){
        var bookName = $("#bookName_add").val();
        var author = $("#author_add").val();
        var publisher = $("#publisher_add").val();
        var date = $("#date_add").val();
        var price = $("#price_add").val();
        var usage = $("#usage_add").val();
        var ISBN = $("#ISBN_add").val();
        let priceReg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
        if (priceReg.test(price)) {
        $.ajax({
            url: "http://localhost:8080/booksystem/book?method=addBook",
            async: true,
            data: "bookName=" + bookName + "&author=" + author + "&publisher=" + publisher + "&date=" + date + "&price=" + price + "&usage=" + usage+"&ISBN="+ISBN,
            type: "post",
            dataType: "text",
            success: function (data) {
                $.ajax(
                    {
                        url: "http://localhost:8080/booksystem/book",
                        async: true,
                        data: "method=findAllBook",
                        type: "post",
                        dataType: "text",
                        success: function (data) {
                            window.location.reload();
                        },
                        error: function () {
                        }
                    }
                )
            },
            error: function (data) {
                alert("发生了错误!");
            }
        });
    }else{
            alert("价格的格式错误!");
        }
        }
        else{
            alert("您没有权限")
        }
    }
    //设置搜索功能
    var search = document.getElementById("search");
    search.onclick = function () {
        var searchContent = $("#searchContent").val();
        if (searchContent != "") {
            $.ajax({
                url: "http://localhost:8080/booksystem/book?method=search",
                async: true,
                data: "searchContent=" + searchContent,
                dataType: "text",
                type: "post",
                success: function (data) {
                    location.reload();
                },
                error: function (data) {
                }
            })
        } else {         //如果搜索栏为空,则搜索所有的书籍
            $.ajax(
                {
                    url: "http://localhost:8080/booksystem/book",
                    async: true,
                    data: "method=findAllBook",
                    type: "GET",
                    dataType: "text",
                    success: function (data) {
                        window.location.reload(true);
                    },
                    error: function () {
                    }
                }
            )
        }

    }

</script>
</body>

</html>